/* pages/cottonAssorting/index.wxss */
.body{
    background: #FFFFFF;
  }
  
  .wrapper-contion{
      width: 100%;
      height: 100%;
  }
  
  .wrapper{
    padding-top: 286px;
    width: 750px;
    background: url('https://oss.cloudcpc.com/17edc019d47d3bfdb552aa94e4de6ba8.png')   no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }
  .Logo-Title{
    text-align: center;
    font-size: 42px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 43px;
    margin-bottom: 33px;
  }
  
  .Logo-sub{
    text-align: center;
    width: 750px;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 48px;
    margin-bottom: 133px;
  }
  
  
  .wrapper-white{
    margin-top: -35px;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center; 
    background: #F3F6FF;
    border-radius: 40px 40px 0px 0px;
    padding: 65px 16px 20px 16px;
    overflow: hidden;
  }
  
  
  
  .top-Title-white{
    display: flex;
    flex-direction: row;
    width: 686px;
    height: 229px;
    margin-bottom: 43px;
    background: #FFFFFF;
    box-shadow: 0px 2px 18px 0px rgba(108, 139, 232, 0.11);
    border-radius: 20px;
  }
  
  .top-Title-left{
    margin-top: 27px;
    margin-left: 42px;
    width: 186px;
    height: 192px;
    margin-right: 16px;
  }
  
  .top-Title-right{
    width: 425px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .top-Title{
    margin-bottom: 28px;
    font-size: 30px;
    color: #18202D;
    line-height: 34px;
  }
  
  .top-sub{
    width: 425px;
    font-size: 25px;
    color: #888888;
    line-height: 36px;
  }
  
  .sys-white{
    padding-top: 50px;
    width: 750px;
    background: url('https://oss.cloudcpc.com/63431210d72037c5a3845f2892a1ed89.png')   no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .sys-Title{
    margin-bottom: 95px;
    font-size: 36px;
    color: #18202D;
    line-height: 48px;
  }
  
  .sys-image{
    width: 691px;
    height: 340px;
    margin-bottom: 47px;
  }
  
  .sys-sub{
    margin-bottom: 230px;
    width: 671px;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 48px;
    text-align: center;
  }
  
  .function-white{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 84px;
    background: #F3F6FF;
  }
  
  .function-Title{
    font-size: 36px;
    color: #18202D;
    line-height: 48px;
    text-align: center;
    margin-bottom: 93px;
  }
  .function-first{
    padding-bottom: 38px;
    margin-bottom: 94px;
    width: 689px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(108, 139, 232, 0.32);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
  }
  
  .function-view{
    margin-top: -30px;
    margin-bottom: 54px;
    margin-left: auto;
    margin-right: auto;
    width: 265px;
    height: 60px;
    background: linear-gradient(0deg, #0071FF 0%, #318CFF 100%);
    border-radius: 5px;
    text-align: center;
    font-size: 30px;
    color: #FFFFFF;
    line-height: 60px;
  }
  
  
  
  .function-sub{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
    width: 445px;
    font-size: 28px;
    color: #888888;
    line-height: 44px;
    text-align: center;
  }
  .function-first-image{
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    width: 610px;
    height: 500px;
  }
  
  .function-list{
    margin-left: 170px;
    display: flex;
    flex-direction: row;
    margin-bottom: 25px;
  }
  .function-list-image{
    width: 23px;
    height: 18px;
    margin-right: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 6px;
  }
  .function-first-title{
    font-size: 28px;
    color: #666666;
    line-height: 32px;
  }
  
  .function-sub-second{
    width: 653px;
  }
  
  .function-list-second{
    margin-left: 255px;
  }
  
  .function-second-image{
    width: 591px;
    height: 502px;
  }
  
  .function-sub-third{
    width: 560px;
  }
  
  .function-third-image{
    width: 623px;
    height: 506px;
  }
  .function-third{
    margin-bottom: 106px;
  }
  
  .function-down{
    position: relative;
    padding-top: 127px;
    padding-bottom: 797px;
    margin-bottom: 136px;
    width: 750px;
    background: url('https://oss.cloudcpc.com/8f0be73c2abd3b97a1fc1e720875412e.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
  }
  
  .down-Title{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    margin-bottom:50px;
    font-size: 36px;
    color: #FFFFFF;
    line-height: 48px;
  }
  
  .down-sub{
    margin-left: auto;
    margin-right: auto;
    width: 659px;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 48px;
  }
  
  .image-one{
    position: absolute;
    top: 515px;
    left: 34px;
    width: 180px;
    height: 180px;
  }
  
  .image-two{
    position: absolute;
    top:485px;
    left: 270px;
    width: 163px;
    height: 163px;
  }
  
  .image-three{
    position: absolute;
    top: 495px;
    left: 490px;
    width: 220px;
    height: 220px;
  }
  
  .image-four{
    position: absolute;
    top: 700px;
    left: 300px;
    width: 180px;
    height: 180px;
  }
  
  .image-five{
    position: absolute;
    top: 800px;
    left: 70px;
    width: 180px;
    height: 180px;
  
  }
  .image-six{
    position: absolute;
    top: 910px;
    left: 300px;
    width: 180px;
    height: 180px;
  }
  .image-seven{
    position: absolute;
    top: 830px;
    left: 505px;
    width: 180px;
    height: 180px;
    
  
  }
  
  .image-an{
    transform: scale(0.8);
    -webkit-animation-name: scaleDraw; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
    -webkit-animation-duration: 5s; /*动画所花费的时间*/
  }
  
  @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0%{
        transform: scale(0.8);  /*开始为原始大小*/
        opacity: 0.8;
    }
    25%{
        transform: scale(1); /*放大1.1倍*/
        opacity: 1;
    }
    50%{
        transform: scale(0.8);
        opacity: 0.8;
    }
    75%{
        transform: scale(1);
        opacity: 1;
    }
  }
  
  
  /*上下 
  animation:Updown 1s infinite alternate;
    -webkit-animation:Updown 1s alternate infinite;
  
  @keyframes Updown{
    from{margin-top: 30px;}
    to{margin-top: 10px;}
  }
  
  @-webkit-keyframes Updown{
    from{margin-top: 30px;}
    to{margin-top: 10px;}
  } */
  